<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.p1 p{
				background-color: yellow;
			}
			
			.p2>p{
				background-color: yellow;
			}
			
			.p3+p{
				background-color: yellow;
			}
			
			.p4~p{
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		
		<!--后代选择器-->
		<div class="p1">
			<p>段落一</p>
			<p>段落二</p>
		</div>
		<!--子元素选择器-->
		<div class="p2">
			<p>aaaaa</p>
		</div>
		<div class="p2">
			<span><p>aaaa</p></span>
		</div>
		<!--相邻兄弟选择器-->
		<div class="p3"></div>
		<p>aasax</p>
		<p>zzqazq</p>
		<!--后续兄弟选择器-->
		<div class="p4">
			<p>sasa</p>
			<p>caca</p>
		</div>
		<p>asas</p>
		<p>xaxq</p>
	</body>
</html>